<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><meta name="referrer" content="no-referrer" />
  <title>个人中心界面</title>
  <script src="js/jquery-1.11.0.min.js"></script>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <style>
    .left-side {
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: 5;
      display: block;
      width: 240px;
      font-weight: 500;
    }
    .card{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 700px;
      border-radius: 5px;
    }
    .submenu >ul{
      display: none;
    }
    .open>ul{
      display: block;
    }
    .button {
      border-color: cornsilk;
      background-color: rgba(65, 192, 170, .7);
      color: aliceblue;
      border-style: hidden;
      border-radius: 5px;
      width: 100px;
      height: 31px;
      font-size: 16px;
    }
  </style>
  <script>
    $(function () {
      console.log("进入头部");
      $(".header").load("headHtml");
    });
    $(function () {
      $.post("/getUserName",function (obj) {
        if (obj!=null&&obj!=100){
          $("#userName").attr("value",obj.username);
          $("#password").attr("value",obj.password);
        }else {
          if (confirm("您还未登录，是否先登录？")) {
            console.log("您选择了是");
            window.location.href = "loginHtml";
          } else {
            console.log("您选择了否");
            window.location.href = "self";
          }
        }
      },"json")
    })
  </script>
  <script>
    $(function () {
      $('.submenu').mouseover(function(){
        $(this).addClass('open');
      }).mouseout(function(){
        $(this).removeClass('open');
      });
    })
  </script>
</head>
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <h1 style="text-align: center;color: #33cabb;">Spider</h1>
      </div>
      <div class="lyear-layout-sidebar-scroll">
        <nav class="sidebar-main">
          <ul class="nav nav-drawer" style="list-style: none">
            <li class="nav-item active"><a href="/notice"><i class="mdi mdi-home"></i>公告栏</a></li>
            <li class="nav-item active"><a href="/index"><i class="mdi mdi-home"></i>爬取图片</a></li>
            <li class="nav-item active"><a href="/displayHtml"><i class="mdi mdi-home"></i>我的收藏</a></li>
            <li class="nav-item active"><a href="/share"><i class="mdi mdi-home"></i>好图分享</a></li>
            <li class="nav-item active submenu"><a href="#"><i class="mdi mdi-home"></i>个人中心</a>
              <ul class="nav nav-drawer">
                <li class="nav-item active"><a href="/self">&nbsp&nbsp&nbsp&nbsp<i class="mdi mdi-step-forward"></i>信息编辑</a></li>
                <li class="nav-item active"><a href="/record">&nbsp&nbsp&nbsp&nbsp<i class="mdi mdi-step-forward"></i>爬取记录</a></li>
                <li class="nav-item active"><a href="/comment">&nbsp&nbsp&nbsp&nbsp<i class="mdi mdi-step-forward"></i>评论反馈</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </aside>
    <!--End 左侧导航-->
    <!--头部信息-->
    <div class="header"></div>
    <!--End 头部信息-->
    <!-- 主题内容 -->
    <!--页面主要内容 table table-striped table-hover-->
    <main class="lyear-layout-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <form action="" id="form">
                <h1 style="text-align: center;color: #777;">信息编辑</h1>
                <p>用户名:&nbsp&nbsp&nbsp<input id="userName" name="username" type="text" readonly><label id="name_trip"></label></p>

                <p>密&nbsp&nbsp&nbsp&nbsp码:&nbsp&nbsp&nbsp<input id="password" name="password" type="password" readonly><label id="password_trip"></label></p>

                <div style="text-align: center;margin-top: 30px;">
                  <a href="changePwd"><input class="button" value="修改密码" type="button"></a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
</body>
</html>